<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>销售机会列表</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1>销售机会管理</h1>
            <a th:href="@{/opportunity/add}" class="btn btn-primary">新增销售机会</a>
        </div>
        
        <!-- 搜索表单 -->
        <div class="card mb-3">
            <div class="card-body">
                <form id="searchForm" class="d-flex justify-content-between align-items-center">
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%;">
                        <div class="form-group" style="margin-bottom: 0;">
                            <input type="text" class="form-control" placeholder="机会名称" name="name">
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select class="form-control" name="stage">
                                <option value="">销售阶段</option>
                                <option value="1">初步接洽</option>
                                <option value="2">需求确认</option>
                                <option value="3">方案制定</option>
                                <option value="4">商务谈判</option>
                                <option value="5">赢单</option>
                                <option value="6">输单</option>
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <input type="text" class="form-control" placeholder="客户名称" name="customerName">
                        </div>
                    </div>
                    <div style="margin-left: 1rem; display: flex;">
                        <button type="submit" class="btn btn-primary mr-2">搜索</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 销售机会列表 -->
        <div class="card">
            <div class="card-body">
                <table class="table" id="opportunityTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">ID</th>
                            <th style="width: 15%; text-align: left;">名称</th>
                            <th style="width: 15%; text-align: left;">客户</th>
                            <th style="width: 10%; text-align: center;">销售阶段</th>
                            <th style="width: 10%; text-align: right;">预期金额</th>
                            <th style="width: 15%; text-align: center;">预计成交日期</th>
                            <th style="width: 15%; text-align: left;">负责人</th>
                            <th style="width: 15%; text-align: center;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 数据加载中... -->
                    </tbody>
                </table>
                
                <!-- 分页区域 -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        共 <span id="totalCount">0</span> 条记录
                    </div>
                    <ul class="pagination">
                        <!-- 分页内容将由JS动态生成 -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 定义表格列
                const columns = [
                    { field: 'id' },
                    { field: 'name' },
                    { field: 'customerName' },
                    { 
                        field: 'stageName',
                        render: function(value, row) {
                            let badgeClass = 'badge-info';
                            if (row.stage === 5) badgeClass = 'badge-success';
                            if (row.stage === 6) badgeClass = 'badge-danger';
                            return `<span class="badge ${badgeClass}">${value}</span>`;
                        }
                    },
                    { 
                        field: 'expectedAmount',
                        render: function(value) {
                            return `¥${value || 0}`;
                        }
                    },
                    { 
                        field: 'expectedDate',
                        render: function(value) {
                            if (!value) return '';
                            return value.substring(0, 10);
                        }
                    },
                    { field: 'managerName' }
                ];
                
                // 加载分页数据
                loadPageData('/crm/api/opportunity/list', 'opportunityTable', columns);
                
                // 初始化删除确认
                document.addEventListener('click', function(e) {
                    if (e.target && e.target.classList.contains('btn-delete')) {
                        e.preventDefault();
                        if (confirm('确定要删除此销售机会吗？此操作不可恢复。')) {
                            const url = e.target.getAttribute('data-url');
                            deleteResource(url);
                        }
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 